{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}


{% block title %}信用卡还款金额趋势{% endblock %}

{% block page_content %}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./static/js/my_js.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

<form class="form-inline" action="" method="post" name="">
<form action="/repayment_recenty_info" method="post" name="postinfo">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

    <div class="form-row">
			<div class="col-md-12 ">


        <div class="form col-md-2">
            <label>账户</label>
            <select name="account_id" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% if account_json %}
                    {% for info in account_json %}
                        <option value="{{ info.get('id') }}">{{ info.get('account_name') }}</option>
                    {% endfor %}
                {% endif %}
            </select>
        </div>

        <div class="form col-md-2">
            <label>开始年份</label>
            <select name="begin_year" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in years_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form col-md-2">
            <label>开始月份</label>
            <select name="begin_month" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in months_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form col-md-2">
            <label>结束年份</label>
            <select name="end_year" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in years_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form col-md-2">
            <label>结束月份</label>
            <select name="end_month" class="form-control"  style="width: 100%">
                <option value="-1">--请选择--</option>
                {% for info in months_json %}
                        <option value="{{ info }}">{{ info }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form col-md-1 col-md-offset-1" >
        	<button type="submit" class="btn btn-primary">提交</button>
        </div>

	</div>

    </div>

    

  </form>

    <br><br>

<!--table class="table table-bordered">
        <tr>
            <th>月份</th>
            <th>金额</th>
        </tr>
            {% if json_data %}
                 {% for foo in json_data %}
                    <tr>
                      <td>{{ foo.get('month') }}</td>
                      <td>{{ foo.get('money') }}</td>
                    </tr>
                 {% endfor %}
            {% endif %}

</table-->


    <div id="main" style="top: 50px;width: 800px;height:500px;margin: 0 auto;"></div>
    <script type="text/javascript">

        var myChart1 = echarts.init(document.getElementById('main'));
        var url_bar = "/api/repayment_recenty/".concat({{ user_id }}, "?account_id=", {{ account_id }}, "&begin_year=", {{ begin_year }}, "&begin_month=", {{ begin_month }}, "&end_year=", {{ end_year }}, "&end_month=", {{ end_month }})

        $.get(url_bar).done(function (data){
        myChart1.setOption({
          title: {
                text : '信用卡还款趋势',
                x: 'center',
                y: 'top'
                },
          tooltip: {
            trigger: 'item',
            formatter: "{b}: {c}元"
          },
          xAxis: {
            name: '月份',
            nameLocation: "middle",
            nameGap: 20,
            type: 'category',
            data: data['month']
          },
          yAxis: {
                name: '还款金额（元）',
                nameLocation: "middle",
                nameGap: 60,
                type: 'value'
                },
          series: [{
            type: 'bar',
            data: data['money']
          },]

        });
        });


    </script>


{% endblock %}
